<template>
  <el-main>
    <div class="notice">
      <h2>请选择你要整理的书目1</h2>
    </div>
    <el-tabs :tab-position="'left'">
      <el-tab-pane v-for="course in courses" :key="course" :label="course.course_name">

        <!--    以下无法渲染，设置成图床链接才可以    -->
        <el-row>
          <el-col :span="8" v-for="detail in course.content" :key="detail">
            <el-image :src="detail.bookCover" style="height: 160px" @click="gotoBookDetail"></el-image>

            <h3>{{ detail.description }}</h3>
          </el-col>
        </el-row>
        <!--以上无法渲染-->

      </el-tab-pane>
    </el-tabs>
  </el-main>

  <el-footer class="footer">

    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="16">

        <el-row>

          <el-col :span="12">
            <el-image :src="require('@/assets/img/book-input/tijiao-left.png')" class="left" @click="gotoproblemBooks"></el-image>
          </el-col>

            <el-col :span="12">
              <el-image :src="require('@/assets/img/book-input/tijiao-right.png')" class="right" @click="gotoSuccess"></el-image>
            </el-col>
        </el-row>
        <div class="questionsNum">
          <span>您已将{{ questionsNum }}道题加入错题本</span>
        </div>


      </el-col>
      <el-col :span="4"></el-col>
    </el-row>

  </el-footer>
</template>

<script>
import {defineComponent, onMounted, ref} from 'vue'
import {useRouter} from "vue-router";

export default defineComponent({
  name: "book-input",
  setup() {
    const router = useRouter();
    const problems = ref([{
      bookId:101,
      pageNum:"P1",
      questionsNum:"Q5"
    }]);

   problems.value= router.currentRoute.value.params.problems;
   let questionsNum=0;
   if(problems.value === null || typeof problems.value === "undefined")
    questionsNum = 0;
   else
     questionsNum = problems.value.length;  // TODO:显示错题数目，这里要通过请求来获得，开发阶段先写死



    const courses = ref([]); // TODO:这里也要通过请求来获取到数据，数据格式要类似course_test_data

    const course_test_data = [
      {
        "course_name": "数学",
        "content": [
          {
            "bookId":101,
            "bookCover": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            "description": "数学必修一·课本"
          },
          {
            "bookId":102,
            "bookCover": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            "description": "数学必修一·教材"
          }
        ]
      },
      {
        "course_name": "语文",
        "content": [
          {
            "bookId":201,
            "bookCover": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            "description": "数学必修一·课本"
          },
          {
            "bookId":201,
            "bookCover": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            "description": "数学必修一·教材"
          },
          {
            "bookId":203,
            "bookCover": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            "description": "数学必修一·课本"
          },
          {
            "bookId":204,
            "bookCover": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            "description": "数学必修一·教材"
          },
          {
            "bookId":205,
            "bookCover": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            "description": "数学必修一·课本"
          },
          {
            "bookId":206,
            "bookCover": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            "description": "数学必修一·教材"
          }
        ]
      },
      {
        "course_name": "体育",
        "content": {}
      }
    ]

    courses.value = course_test_data; //把course_test_data的值赋予course


    /**
     * 请求获取错题数量以及
     */


    const gotoproblemBooks = () =>{
      router.push({
        path: '/problemBooks',
        name: 'ProblemBooks',
        params:{
          problems:problems
        }
      })
    }

    const gotoSuccess = () =>{
      router.push({
        path:"/success",
        name:"Success",
        params:{
          "dizhi":"Book"
        }
      });
    }

    const gotoBookDetail = (data) =>{
       router.push({
         path:"/bookDetail",
         name : 'BookDetail',
         params:{
           book:data,
           problems:problems
         }
       })
    }

    return {
      courses,
      course_test_data,
      questionsNum,
      gotoproblemBooks,
      gotoSuccess,
      gotoBookDetail,
    }
  }
});
</script>

<style scoped>
.el-main {
  background: #FFFFFF;
  width: 1024px;
}

.notice {
  width: 1000px;
  border-bottom: #3bcdaf 1px solid;
  margin-bottom: 40px;
  margin-top: -20px;
  margin-left: -15px;
}

.footer {
  height: 100px !important;
  background: #FFFFFF;
}

.submit {
  height: 100px !important;
  margin-left: 75px !important;
}

.questionsNum {
  position: absolute;
  bottom: 25px !important;
  margin-left: 210px;
}

.questionsNum span {
  font-size: large;
}

.left {
  width: 75px !important;
  margin-left: 125px !important;
}

.right {
  margin-left: -129px !important;
  width: 352px;
}

</style>